<template>
    <div :style="carStyle">
        <div class="itemtips" v-if="!showContent"></div>
        <div style="text-align: center;" v-else>
            <div v-if="item.showType == 1" class="statusinfo">
                <span :style="titleStyle">{{ item.title }}</span>
                <span :style="valueStyle"> {{ valFormat(value) }}</span>
                <span :style="unitStyle"> {{ item.unit }}</span>
                <span :style="textStyle"> {{ text }}</span>
            </div>
            <template v-else>
                <div class="card-title" :style="titleStyle" v-if="item.showType == 2">{{ item.title }}</div>
                <div v-if="item.isShowValue">
                    <span :style="valueStyle">{{ valFormat(value) }}</span>
                    <span :style="unitStyle"> {{ item.unit }}</span>
                </div>
                <div v-if="item.isShowText">
                    <span :style="textStyle">{{ text }}</span>
                </div>
                <div :style="titleStyle" v-if="item.showType == 3">{{ item.title }}</div>
            </template>
        </div>
        <div class="gotoViewBtn" v-if="isGotoView" @click="gotoUrl"></div>
    </div>
</template>

<script>

export default {
    Name: "StatusItem",
    props: {
        obj: Object,
        item: Object,
        isEdit: {
            type: Boolean,
            default: false,
        },
        reload: Function,
    },
    data() {
        return {
            dataStr: "",
            showContent: false,
            value: 0,
            text: "",
            carStyle: {},
            titleStyle: {},
            unitStyle: {},
            valueStyle: {},
            textStyle: {},
        }
    },
    mounted() {
        this.setStyle();

        this.setStatusStyle();
        this.dataStr = JSON.stringify(this.obj.tableData);
    },
    computed: {
        isGotoView() {
            if (this.isEdit == false && this.item.contactType > 0) {
                if (this.item.contactType == 1 && this.item.boardId) {
                    return true;
                }
                if (this.item.contactType == 2 && this.item.url) {
                    return true;
                }
            }
            return false;
        }
    },
    methods: {
        gotoUrl() {
            if (this.isEdit == false && this.item.contactType > 0) {
                if (this.item.contactType == 1 && this.item.boardId) {
                    this.$router.replace({ path: `/share/${this.item.boardId}` })
                }
                if (this.item.contactType == 2 && this.item.url) {
                    this.$router.replace(this.item.url);
                }
            }
        },
        setStyle() {
            var style = this.item.style;
            var data = this.item;
            var backgroundColor = "";
            var backgroundImage = "";

            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                left: 0,
                bottom: 0,
                top: 0,
                right: 0,
                position: "absolute",
                // width: "100%",
                // height: "100%",
                display: "flex",
                overflow: "hidden",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
            }

            this.titleStyle = {
                fontSize: style.fontSize + "px",
                color: style.color,
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            };

            var unitSize = data.unitSize;
            var unitColor = data.unitColor;
            var unitFontWeight = data.unitFontWeight;
            var unitFontStyle = data.unitFontStyle;
            this.unitStyle = {
                fontSize: unitSize + "px",
                color: unitColor,
                fontStyle: unitFontStyle,
                fontWeight: unitFontWeight,
            };
        },
        setStatusStyle() {
            if (this.item.lineId) {
                this.showContent = true;
            }

            var data = this.item;
            var value = this.value = this.item.value;

            if (data.statusList.length) {
                var color = "";
                var text = "";
                var valSize = "";
                var valColor = this.obj.style.color;
                var valFontWeight = "";
                var valFontStyle = "";
                var textSize = "";
                var textColor = "";
                var textFontWeight = "";
                var textFontStyle = "";
                var backgroundImage = "";

                data.statusList.forEach(e => {
                    if (e.value != "" && Number(value) >= Number(e.value)) {
                        backgroundImage = `url(${e.backgroundImage}`;
                        color = e.backgroundColor;
                        text = e.text;
                        valSize = e.valSize;
                        valColor = e.valColor;
                        valFontWeight = e.valFontWeight;
                        valFontStyle = e.valFontStyle;
                        textSize = e.textSize;
                        textColor = e.textColor;
                        textFontWeight = e.textFontWeight;
                        textFontStyle = e.textFontStyle;
                    }
                })

                this.text = text;
                this.carStyle.backgroundImage = backgroundImage;
                if (color.length) {
                    // this.carStyle.backgroundImage = undefined;
                    this.carStyle.backgroundColor = color;
                }

                this.valueStyle = {
                    fontSize: valSize + "px",
                    color: valColor,
                    fontStyle: valFontStyle,
                    fontWeight: valFontWeight,
                };
                this.textStyle = {
                    fontSize: textSize + "px",
                    color: textColor,
                    fontStyle: textFontStyle,
                    fontWeight: textFontWeight,
                };
            }
        },
        // 计算精度
        valFormat(value) {
            if (value != null && this.item.decimal >= 0) {
                return Number(value).toFixed(this.item.decimal);
            }
            return value;
        }
    },
    watch: {
        item: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();
                this.setStatusStyle();

                // 数据绑定改变了
                if (newVal.lineId != oldVal.lineId) {
                    // console.log("???")
                    // this.$emit('reload');
                }
            }
        }
    },
}
</script>

<style>
.itemtips {
    font-size: 12px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #333;
    display: flex;
}
</style>